<template>
    <div class="roomSatus">
       <div id="roomSatus_select">
             <div class="roomSatusLeft">
            <!-- 条件筛选 -->
            <!-- 开始时间 -->
            <div> 
                <DatePicker type="datetime" format="yyyy-MM-dd" placeholder="选择起始时间" v-model="startDate"></DatePicker>    
            </div>
            <!-- 结束时间 -->
            <div>
                <DatePicker type="datetime" format="yyyy-MM-dd" placeholder="选择结束时间" v-model="endDate"></DatePicker>    
                
            </div>
            <!-- 房型 -->
            <div>
                <Select v-model="SelectionRoomType" style="width:158px" clearable label-in-value>
                 <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <!-- 房级 -->
            <div>
                <Select v-model="SelectionRoomClass" style="width:158px" clearable label-in-value>
                 <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <div>
               <button style="width:100%;color:#fff;background:#f90;" @click="test2_1_1()">查询</button>
            </div>
        </div>
        <div class="roomSatusRight">
             <div>
                 <Button type="warning">帮助</Button>
             </div>
             <div>
                 <Button type="warning">趋势图</Button>
             </div>
        </div>
       </div>
       <div id="roomSatus_all">
          <div class="roomSatus_table">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <thead>
                     <tr>
                        <th colspan="3">时间</th>
                        <th>房数</th>
                        <th colspan="4">已售</th>
                        <th colspan="8">预测</th>
                        <th colspan="2"></th>
                     </tr>
                     <tr>
                        <th>日期</th>
                        <th>星期</th>
                        <th>入住倒计</th>
                        <th>总房数/允售额</th>
                        <th>销售</th>
                        <th>平均房价</th>
                        <th>收益</th>
                        <th>出租率</th>
                        <th>需求</th>
                        <th>预测销售</th>
                        <th>最终入住</th>
                        <th>平均房价</th>
                        <th>收益</th>
                        <th>收益增值</th>
                        <th>出租率</th>
                        <th>
                            优化时间
                        </th>
                        <th>
                            legId
                        </th>
                       <th>更新时间</th>
                    </tr>
                  </thead>
                <tbody>
                   <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                       <tr>
                        <td>2018-01-24</td>
                        <td><span>星期</span>三</td>
                        <td>1 </td>
                        <td>59 /59 </td>
                        <td>10 </td>
                        <td>164.7  </td>
                        <td>1647  </td>
                        <td>17% </td>
                        <td>38  </td>
                        <td style="color:red">38  </td>
                        <td style="color:red">38</td>
                        <td>380.1  </td>
                        <td>14442  </td>
                        <td>14442</td>
                        <td>64.41%</td>
                        <td>2018-01-19 11:03:07</td>
                        <td>133890144</td>
                        <td>
                            2018-01-19 11:03:07
                        </td>
                    </tr>  
                </tbody>
            </table>
          </div>
          <div class="roomSatus_echarts">
                <div> 
                   <span>预测趋势图</span>
                </div>
                <div> 
                    <div id="myChart" :style="{width: '100%', height: '100%'}">
                    </div>   
                </div>
          </div>
       </div>
    </div>
</template>
<script>
export default {
  name: "hello",
  data() {
    return {
      cityList: [
        {
          value: "1",
          label: "New York"
        },
        {
          value: "2",
          label: "London"
        },
        {
          value: "3",
          label: "Sydney"
        },
        {
          value: "4",
          label: "Ottawa"
        },
        {
          value: "5",
          label: "Paris"
        },
        {
          value: "6",
          label: "Canberra"
        }
      ],
      SelectionRoomType: "",
      SelectionRoomClass: "",
      startDate: "",
      endDate: ""
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {},
        grid: {
          left: "40px",
          top: "20px",
          right: "40px",
          bottom: "50px"
        },
        legend: {
          data: ["蒸发量", "降水量"],
          bottom: "8x"
        },
        toolbox: {},

        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "蒸发量",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "降水量",
            type: "bar",
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ],
            markPoint: {
              data: [
                { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      });
    },
    getTime(start, end) {
      let year = start.getFullYear();
      let mouth = start.getMonth() + 1;
      mouth = mouth < 10 ? "0" + mouth : mouth;
      let day = start.getDate();
      day = day < 10 ? "0" + day : day;
      return year + "-" + mouth + "-" + day;
    },
    test2_1_1() {
      //获取时间，房型，房级
      // return {
      //   SelectionRoomType: this.SelectionRoomType,
      //   SelectionRoomClass: this.SelectionRoomClass,
      //   StartDate: this.getTime(this.startDate),
      //   EndDate: this.getTime(this.endDate)
      // };
      this.$Notice.open({
        title:'查询成功'
      })
    }
  }
};
</script>
<style lang="less">
.roomSatus {
  width: 100%;
  padding: 10px;
  height: 100%;
  background: #ffc1071f;
  display: flex;
  flex-direction: column;
  #roomSatus_select {
    width: 100%;
    padding: 10px;
    height: 8%;
    display: flex;
    .roomSatusLeft {
      display: flex;
      flex-direction: row;
      height: 50px;
      width: 40%;
      background: #fff;
      // width: 100;
      border-radius: 5px;
      > div {
        display: flex;
        width: 100%;
        line-height: 32px;
        justify-content: center;
        padding: 10px 10px;
        .ivu-input {
          top: 50%;
        }
      }
    }
    .roomSatusRight {
      width: 60%;
      height: 50px;
      background: #fff;
      border-radius: 5px;
      position: relative;
      left: -1px;
      display: flex;
      flex-direction: row-reverse;
      line-height: 50px;
      div:nth-child(1) {
        margin-right: 10px;
        margin-left: 10px;
      }
    }
  }
  #roomSatus_all {
    height: 100%;
    width: 100%;
    //   background: red;
    display: flex;
    flex-direction: column;
    padding: 10px;
    .roomSatus_table {
      background: #fff;
      //   border-radius: 5px;
      table {
        border-collapse: collapse;
        text-align: center;
        thead {
          th {
            padding: 9px;
            font-family: "微软雅黑";
            font-size: 12px;
            border: 1px solid #ccc;
          }
        }
        tbody {
          td {
            padding: 12px;
            font-family: "微软雅黑";
            font-size: 12px;
            border: 1px solid #ccc;
          }
        }
      }
    }
    .roomSatus_echarts {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      // border:1px solid #ccc;
      // background: red;
      margin-top: 10px;
      div:nth-child(1) {
        height: 40px;
        line-height: 40px;
        // padding-left: 20px;
        font-family: "微软雅黑";
        font-weight: 800;
        background: #fff;
        border: 1px solid #ccc;
        border-bottom: none;
        span {
        }
      }
      div:nth-child(2) {
        // background: yellow;
        width: 100%;
        height: 100%;
        // padding: 10px 10px 10px 20px;
      }
    }
  }
}
</style>